'use strict';

//获取相关元素 获取元素的两种方法 1.document.querySelector 2.document.getElementById

//获取玩家1信息
//玩家1----盒子
const player0El = document.querySelector('.player--0');
//玩家1----记分板
const score0El = document.querySelector('#score--0');
//玩家1----当前分数
const current0El = document.getElementById('current--0');

//获取玩家2信息
//玩家2----盒子
const player1El = document.querySelector('.player--1');
//玩家2----记分板
const score1El = document.getElementById('score--1');
//玩家2----当前分数
const current1El = document.getElementById('current--1');

const diceEl = document.querySelector('.dice');

const btnNew = document.querySelector('.btn--new');

const btnRoll = document.querySelector('.btn--roll');

const btnHold = document.querySelector('.btn--hold');

//数据上
//设置初始记分板分数；设置当前分数(current)初始值；设置默认当前玩家；用于切换；设置游戏进行中布尔值
let scores, currentScore, activePlayer, playing;

//数据初始化函数
const init = function () {
  //数据上---赋初始值
  //设置初始记分板分数
  scores = [0, 0];

  //设置当前分数(current)初始值
  currentScore = 0;

  //设置默认当前玩家,用于切换
  activePlayer = 0;

  //游戏正在进行
  playing = true;

  //页面上
  //初始化所有数据
  document.querySelector('h1').textContent = 'See who gets to 100 first !';

  score0El.textContent = 0;

  score1El.textContent = 0;

  current0El.textContent = 0;

  current1El.textContent = 0;

  //隐藏骰子图片
  diceEl.classList.add('hidden');

  //设置初始样式
  player0El.classList.remove('player--winner');

  player1El.classList.remove('player--winner');

  player0El.classList.add('player--active');

  player1El.classList.remove('player--active');
};
//运行函数
init();

//切换玩家函数
const switchPlayer = function () {
  //清零当前玩家当前分数积分，再进行切换玩家
  //页面上----清零当前分数
  document.getElementById(`current--${activePlayer}`).textContent = 0;
  //数据上----清零当前分数
  currentScore = 0;
  //切换玩家
  activePlayer = activePlayer === 0 ? 1 : 0;
  //切换当前玩家----背景颜色高光
  // toggle如果该类(class)存在则删除该类，如果该类不存在则添加该类
  player0El.classList.toggle('player--active');
  player1El.classList.toggle('player--active');
};

//ROLL DICE按钮 监听点击事件
btnRoll.addEventListener('click', function () {
  //当游戏还在进行时
  if (playing) {
    //1.随机投骰子
    const dice = Math.trunc(Math.random() * 6) + 1;
    //   console.log(dice);

    //2.显示骰子
    diceEl.classList.remove('hidden');
    //操作显示的img元素(dice)显示的图片源src----插值写法
    //#FF3030 巧妙写法  dice-${dice}.png,生成的随机点数范围1-6,拼入内容恰好对应显示的6张照片之一
    diceEl.src = `dice-${dice}.png`;

    //3.检查是否投到1
    //如果没投到1,累加所投骰子点数(dice)的值到当前分数(current)中
    if (dice !== 1) {
      currentScore += dice;
      // current0El.textContent = currentScore; //稍后修改
      // 动态选择当前玩家
      //页面上----记录当前玩家当前分数
      document.getElementById(`current--${activePlayer}`).textContent =
        currentScore;
    }
    //投到1则切换玩家
    else {
      // //清零当前玩家当前分数积分，再进行切换玩家
      // //页面上----清零当前分数
      // document.getElementById(`current--${activePlayer}`).textContent = 0;
      // //切换玩家
      // activePlayer = activePlayer === 0 ? 1 : 0;
      // //数据上----清零当前分数
      // currentScore = 0;
      // //切换当前玩家----背景颜色高光
      // // toggle如果该类(class)存在则删除该类，如果该类不存在则添加该类
      // player0El.classList.toggle('player--active');
      // player1El.classList.toggle('player--active');
      //切换玩家函数
      switchPlayer();
    }
  }
});

//Hold按钮 监听点击事件 记录当前分数到记分板，若当前玩家记分板总分 >= 100，游戏结束，否则切换玩家
btnHold.addEventListener('click', function () {
  //当游戏正在进行时
  if (playing) {
    //切换时隐藏骰子
    diceEl.classList.add('hidden');
    //1.数据上---将当前分数(CURRENT)与记分板(score)上的分数相加
    scores[activePlayer] += currentScore;
    //页面上---更新当前记分板
    document.getElementById(`score--${activePlayer}`).textContent =
      scores[activePlayer];
    //2.检查记分板分数是否已经 >= 100
    //>= 100 结束游戏,获得胜利
    if (scores[activePlayer] >= 100) {
      //结束游戏进程
      playing = false;
      //清除当前玩家样式，并添加胜利玩家样式
      //清除当前玩家样式
      document
        .querySelector(`.player--${activePlayer}`)
        .classList.remove('player--active');
      //添加胜利玩家样式
      document
        .querySelector(`.player--${activePlayer}`)
        .classList.add('player--winner');
      //提示玩家胜利
      document.querySelector('h1').textContent = `PLAYER ${
        activePlayer + 1
      } win !`;
    }
    //未 >= 100 切换玩家
    else {
      switchPlayer();
    }
  }
});

//NEW GAME按钮 监听点击事件 重置所有数据---运行数据初始化函数
btnNew.addEventListener('click', init);
